<template>
  <div class="TitleBox">
      <div class="d-flex pt-2 pl-2">
          <div class="d-flex">
              <span><i class="iconfont icon-tongji4" /></span>
              <span class="mx-2" @click="goToPersonnelInfoCapsuleBarChartView">职称</span>
          </div>
      </div>
      <!-- 将饼状图容器放在这里 -->
      <div class="d-flex jc-center chart-container">
          <div id="Title-pie" style="width:340px;height:199px;"></div>
      </div>
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
// 引入ECharts库
import * as echarts from 'echarts';

export default defineComponent({
  name: 'TitleBoxView',
  // 组件的选项和方法
  props:{
    CampusArea: {
      type: String,
      default: '' // 如果没有传入 title，默认值为空字符串
    }
  },
  data() {
      return {
          // 数据属性
      };
  },
  methods: {
      // 方法
  },
  mounted() 
  {
    
      // 在组件挂载后初始化ECharts实例
      this.initECharts();
  },
  methods: {
    goToPersonnelInfoCapsuleBarChartView() 
    { 
      // 可以将 title 作为参数传递到路由中
      this.$router.push({ 
        name: this.CampusArea=="汾阳"?"FengYnagPersonnelInfoCapsuleBarChart":"PuJiangPersonnelInfoCapsuleBarChart",
        query:{CapsuleBarChartTitle:this.CampusArea,DataContent:'职称'}
      });
    },
      initECharts() {
          // 获取ECharts容器
          const chartDom = document.getElementById('Title-pie');
          const myChart = echarts.init(chartDom);

          // 配置项
          const option = {
              tooltip: {
                  trigger: 'item'
              },
              tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}%' // 修改这里，在数值后面加上 %
                },
              legend: {
                  orient: 'horizontal', // 水平排列
                  bottom: 5, // 放置在底部
                  left: 'center', // 水平居中
                  width: 'auto', // 宽度自适应
                  textStyle:
                  {
                    color:'white'
                  }
              },
              series: [
                  {
                    name: '',
                    type: 'pie',
                    radius: ['60%','80%'],
                           label: {
                      show: false // 隐藏数据标签
                    },
                       labelLine: {
                      show: false // 隐藏正常状态下的引导线
                    },
                    avoidLabelOverlap: false,
                    center: ['50%', '45%'],
                      data: [
                          { value: 10, name: '主任护士' },
                          { value: 15, name: '主管护士' },
                          { value: 12, name: '副主任护士' },
                          { value: 30, name: '护士' }
                      ],
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          },
      labelLine: {
        show: false
      },
                      },
                  }
              ]
          };

          // 使用配置项显示图表
          myChart.setOption(option);
      }
  }
});
</script>

<style>
.TitleBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.chart-container {
  flex: 1; /* 占满剩余空间 */
}
</style>